<template>
  <span :style="styles">
    <svg class="svg" :width="size" :height="size">
      <use :xlink:href="iconId" width="100%" height="100%"/>
    </svg>
  </span>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    size: {
      type: String,
      dafault: '12'
    }
  },
  computed: {
    iconId () {
      return `#${this.name}`
    },
    styles () {
      return `height:${this.size}px;line-height:${this.size}px`
    }
  },
}
</script>

<style>
.svg{
  color: red;
}
</style>